<template>
  <div class="personal-center">
    <div class="user-info">
      <van-image class="avatar" round width="80" height="80" src="https://picsum.photos/100" alt="用户头像" />
      <div class="gender-container">
        <icon-mdi-gender-male v-if="userInfo.gender == '1'" class="gender-icon" style="color: #87CEEB" />
        <icon-mdi-gender-female v-if="userInfo.gender == '0'" class="gender-icon" style="color: #FFB6C1" />
        <div class="user-name">{{ userInfo.nickName }}</div>
      </div>
    </div>

    <van-cell-group>
      <van-cell title="发布历史" size="large" is-link to="/findPost/history" title-align="left"
        icon="bullhorn-o" />
      <van-cell title="修改信息" size="large" is-link title-align="left" icon="records-o" />
      <van-cell title="系统设置" size="large" is-link to="/setting" title-align="left" icon="setting-o" />
    </van-cell-group>

    <van-row gutter="20" style="padding: 20px;">
      <van-col span="24">
        <van-button size="large" color="#e64949" block @click="handleLogout">退出登录</van-button>
      </van-col>
    </van-row>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores/user';
import { getUserInfo } from '@/utils/auth'; 
const userStore = useUserStore();
const router = useRouter();
const isWechat = ref(false);

const userInfo = getUserInfo();

onMounted(() => {
  const userAgent = navigator.userAgent.toLowerCase();
  isWechat.value = userAgent.includes('micromessenger');
  document.body.style.overflow = 'hidden';
});

onUnmounted(() => {
  document.body.style.overflow = '';
});

const handleLogout = () => {
  showDialog({
    message: '确认退出登录?',
    showCancelButton: true,
    confirmButtonColor: '#667eea',
  }).then(() => {
    showLoadingToast({
      message: '退出中...',
      forbidClick: true,
    });
    userStore.logout().then(() => {
      router.push("/login");
    }).catch(() => {
    }).finally(() => {
      closeToast();
    });
  }).catch(() => { });
};
</script>

<style scoped>
.personal-center {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.user-info {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 40px 20px;
  text-align: center;
  color: white;
}

.avatar {
  margin-bottom: 15px;
}

.gender-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.user-name {
  font-size: 18px;
  font-weight: bold;
}

.gender-icon {
  font-size: 18px;
}

</style>
